<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例联习</title>
	</head>
	<body>
		<div id="app">
		<div align="center">
		  姓名:	<input type="text" v-model="addUser.name"/>
		  年龄:	<input type="text" v-model="addUser.age"/>
		  <br />
		  性别:	<input type="text" v-model="addUser.sex"/>
		  <button @click="adduser">增加</button>
		</div>
			<table align="center" border="1px" width="80%">
				<tr>
					<th colspan="5">
						<h3>用户列表</h3>
					</th>
				</tr>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
					<th width="20%">
						<button @click="updateUserBt(user)">修改</button>
						<button @click="deleteUser(user)">删除</button>
					</th>
				</tr>
			</table>
		<div align="center">
		  编号:	<input type="text" disabled v-model="updateUser.id"/>
		  姓名:	<input type="text"  v-model="updateUser.name"/>
		  <br />
		  年龄:	<input type="text"  v-model="updateUser.age"/>
	      性别:	<input type="text"  v-model="updateUser.sex"/>
		  <br />
		  <button @click="updateUserMsg">提交修改</button>
		</div>
		
		 
	    </div> 
	    <script src="../js/vue.js"></script>
	    <script src="../js/axios.js"></script>
	    <script>
	    axios.defaults.baseURL="http://localhost:8090/vue"
	        const app=new Vue({
		    el:"#app",
		    data:{
			    userList:[],
				updateUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				},
				addUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
		    },
		    methods:{
			    async getUser(){
				  let {data:result}=await axios.get("/findAll")
				  this.userList=Promise.data
			        },
				deleteUser(user){
					let {data:result}=await axios.delete("/deleteById?id="+user.id)
					alert(Promise.data)
					this.getUser()
				},
				updateUserMsg(){
					let {data:result}=await axios.post("/update",this.updateUser)
					alert(Promise.data)
					this.getUser()
					this.updateUser={}
					
					
				},
				updateUserBt(user){
					this.updateUser=user
				},
				adduser(){
					axios.put("/save",this.addUser).then(Promise=>{
						alert(Promise.data)
						this.getUser()
						this.addUser={}
					})
				}
					
		        },
		        created(){
			        this.getUser()
		        }
	            })
	    </script>
    </body>
</html>

